<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8" style="margin-top: 20px;">
      <el-card shadow="hover">
        <div class="user">
          <img src="https://s1.ax1x.com/2023/04/28/p91ZUh9.jpg" width="150" />
          <div class="userInfo">
            <p class="name">
              <el-tag size="large">KunKun</el-tag>
            </p>
            <p class="role">
              <el-tag size="large" type="warning" style="margin-top: 6px;">超级管理员</el-tag>
            </p>
          </div>
        </div>
        <div class="loginInfo">
          <p>上次登录时间：<span>2022-11-20</span></p>
          <p>上次登录地点：<span>上海</span></p>
        </div>
      </el-card>
      <el-card shadow="hover" style="margin-top: 20px;height: 450px;">
        <el-table :data="tableData" height="400">
          <el-table-column prop="today" label="日期" />
          <el-table-column prop="todayAccess" label="今日访问量" />
          <el-table-column prop="monthAccess" label="月访问量" />
          <el-table-column prop="totalAccess" label="总访问量" />
        </el-table>
      </el-card>
    </el-col>

    <el-col :span="16" style="margin-top: 20px;">
      <div class="countCard">
        <el-card :body-style="{ display: 'flex', padding: 0 }" v-for="item in countData" :key="item.name">
          <el-icon :size="40">
            <component class="icons" :is="item.icon" :style="{ background: item.color }"></component>
          </el-icon>
          <div class="detail">
            <el-tag size="large" style="height: 100%;font-size: 14px;">
              <p>{{ item.name }}</p>
              <p>
                <el-tag type="danger" style="font-size: 14px;">{{ item.value }}</el-tag>
              </p>
            </el-tag>
          </div>
        </el-card>
      </div>
      <el-card style="height: 300px;">
        <div ref="broken" style="height: 290px;">
          折线图
        </div>
      </el-card>
      <div class="pie">
        <el-card id="pi1" style="margin-right: 35px;">饼状图1</el-card>
        <el-card id="pi2">饼状图2</el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import * as echarts from 'echarts';
export default {
  name: 'Home',
  setup() {
    //获取当前实例
    const { proxy } = getCurrentInstance()

    const tableItem = {
      today: '2022-11-20',
      todayAccess: 20,
      monthAccess: 520,
      totalAccess: 10086
    }

    const tableData = ref(Array.from({ length: 20 }).fill(tableItem))
    const countData = reactive([
      {
        name: '今日访问量',
        icon: 'StarFilled',
        color: 'orange',
        value: 85
      },
      {
        name: '月访问量',
        icon: 'Menu',
        color: 'pink',
        value: 857
      },
      {
        name: '年访问量',
        icon: 'HelpFilled',
        color: 'red',
        value: 5698
      },
      {
        name: '总访问量',
        icon: 'Promotion',
        color: '',
        value: 10086
      },
      {
        name: '打赏总人数',
        icon: 'CoffeeCup',
        color: '#965617',
        value: 101
      },
      {
        name: '破防次数',
        icon: 'Eleme',
        color: 'skyblue',
        value: 1
      },

    ])

    onMounted(() => {
      //图表
      let brokenDom = proxy.$refs.broken
      let brokenChart = echarts.init(brokenDom)
      let brokenOption
      brokenOption = {
        title: {
          text: '人数访问统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['12以下', '12-18', '18-30', '30-40', '40以上']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '12以下',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '12-18',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '18-30',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '30-40',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 205, 330, 320]
          },
          {
            name: '40以上',
            type: 'line',
            stack: 'Total',
            data: [555, 652, 753, 789, 259, 1330, 856]
          }
        ]
      };
      brokenOption && brokenChart.setOption(brokenOption);

      let pieDom1 = document.getElementById('pi1')
      let pieDom2 = document.getElementById('pi2')
      let pieChart1 = echarts.init(pieDom1)
      let pieChart2 = echarts.init(pieDom2)
      let pieOption1
      let pieOption2
      pieOption1 = {
        title: {
          text: '饼状图',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      pieOption2 = {
        title: {
          text: '六边形'
        },
        legend: {
          data: ['黑胡子', '路飞']
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '果实能力', max: 6500 },
            { name: '抵抗性', max: 16000 },
            { name: '霸王色', max: 30000 },
            { name: '武装色', max: 38000 },
            { name: '见闻色', max: 52000 },
            { name: '果实开发', max: 25000 }
          ]
        },
        series: [
          {
            name: '黑胡子 vs 路飞',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: '黑胡子'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: '路飞'
              }
            ]
          }
        ]
      };
      pieOption1 && pieChart1.setOption(pieOption1);
      pieOption2 && pieChart2.setOption(pieOption2);


    })

    return {
      tableData, countData
    }

  }
}
</script>

<style>
.pie .el-card {
  width: 550px;
  height: 350px;
}

.pie {
  display: flex;
  margin-top: 20px;
}

.countCard .detail {
  margin-left: 10px;
  flex-wrap: wrap;
  justify-content: space-around;
}

.countCard .el-card {
  width: 32%;
  margin-bottom: 20px;
}

.countCard {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.user {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.user img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-right: 40px;
}

.loginInfo p {
  line-height: 30px;
  font-size: 14px;
  color: #999;
}

.loginInfo span {
  margin-left: 50px;
}
</style>
